<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('商品质检')"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-inspect" th:object="${chainPurchase}">
        <input type="hidden" name="id" th:value="*{id}">
        <input type="hidden" name="returnReason" th:field="*{returnReason}">
        <input type="hidden" name="transportStatus" th:field="*{transportStatus}">

        <!-- 基本信息展示 -->
        <div class="form-group">
            <label class="col-sm-3 control-label">商品名称：</label>
            <div class="col-sm-8">
                <input class="form-control" readonly th:value="*{commodityName}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">采购数量：</label>
            <div class="col-sm-8">
                <input name="quantity" class="form-control" readonly th:field="*{quantity}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">商品图片：</label>
            <div class="col-sm-8">
                <img th:src="*{image}" width="200">
            </div>
        </div>

        <!-- 质检输入 -->
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">合格数量：</label>
            <div class="col-sm-8">
                <input name="qualifiedQuantity" class="form-control" type="number"
                       min="0" th:max="${chainPurchase.quantity}" required>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">质检结果：</label>
            <div class="col-sm-8">
                <select name="inspectionStatus" class="form-control" required
                        th:field="*{inspectionStatus}"
                        th:with="status=${@dict.getType('inspection_status')}">
                    <option th:each="s : ${status}"
                            th:value="${s.dictValue}"
                            th:text="${s.dictLabel}"></option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">退货原因：</label>
            <div class="col-sm-8">
                <textarea name="returnReason" class="form-control"
                          th:readonly="*{qualifiedQuantity == quantity}"
                          th:field="*{returnReason}"></textarea>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var ctx = [[@{/}]];
    var prefix = ctx + "chain/purchase";
    /* 必须在全局作用域定义 */
    function submitHandler() {
        console.log("=== 框架要求的回调入口 ===");
        $("#form-inspect").submit();
        return false;
    }

    $(function() {
        // 初始化表单验证
        $("#form-inspect").validate({
            rules: {
                qualifiedQuantity: {
                    required: true,
                    min: 0,
                    max: function() {
                        const quantity = parseInt($("input[name='quantity']").val()) || 0;
                        return quantity
                    }
                }
            },
            submitHandler: function(form) {
                console.log("=== 实际提交处理 ===");
                $.operate.save(prefix + "/inspect", $(form).serialize());
                return false;
            }
        });

        // 合格数量联动逻辑
        $("*[name=qualifiedQuantity]").on('input', function() {
            const total = parseInt($("[name=quantity]").val()) || 0;
            const qualified = parseInt($(this).val()) || 0;

            let status = 3;
            if(qualified === total) status = 1;
            else if(qualified > 0) status = 2;

            $("*[name=inspectionStatus]").val(status);
            if (status === 2 || status === 3) {
                $("*[name=returnReason]").prop('required',true);
            }else {
                $("*[name=returnReason]").prop('required',false);
            }
        });
    });
</script>
</body>
</html>
